<template>
    <div class="container">
        <div class="row" v-for="(item,index) in datalist">
            <mt-switch class="switch" v-model="value[index]"></mt-switch>
            <img :src="item.thumb_path" alt="" class="img">
            <div class="inforight">
                <h4 v-text="item.title"></h4>
                <div class="bottom">
                    <ul>
                        <li>
                            <inputNumber :goodscount="item.cou" :goodsid="item.id" v-on:dataobj="setInput"></inputNumber>
                        </li>
                        <li class="red">￥{{item.sell_price}}</li>
                        <li><a href="javascript:void(0)" @click="delrow(item.id, index)">删除</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="total">
      <div class="desc">
        <ul>
          <li>总计（不含运费）</li>
          <li>已勾选商品{{totalcount}}件,总价:￥{{totalAmount}}元</li>
        </ul>
      </div>
      <div id="button">
        <mt-button  type="danger" size="small">去结算</mt-button>
      </div>
    </div>
    </div>
</template>
<script>
import inputNumber from './subcom/inputNumber.vue'
import {setItem,getItem,updata,valueObj} from '../kits/localSg.js'
import common from '../kits/common.js'
import {Toast} from 'mint-ui'
export default {
    components:{inputNumber},
    created(){
        this.getlist();
        console.log(valueObj);
    },
    data(){
        return {
            totalAmount: 0,
            value: [],
            datalist: []
        } 
    },
    methods:{
        getlist(){
            var ids = [];
            getItem().forEach(function (v,i) {
                ids.push(v.goodsid);
            })
            ids = ids.join();
            var url = common.apidomain + '/api/goods/getshopcarlist/' + ids;
            this.$http.get(url).then(res => {
                if(res.body.status != 0){
                    Toast(res.body.message);
                    return;
                }
                this.datalist = res.body.message;
            })
        },
        setInput(resObj){
            console.log(resObj);
        }
    },
    computed: {
      totalcount() {
        // 1. 算出所有的选中的 用ES5中的过滤
        var trueArr = this.value.filter(item => {
          return item
        })
        // 2. 计算当前选中的所有商品的额总价
        var amount = 0
        this.value.forEach((item, index) => {
          if (item) {
            var count = this.datalist[index].cou
            var price = this.datalist[index].sell_price
            var itemamount = count * price
            amount += itemamount
          }
        })
        // 3. 总价给 this.totalAmount
        this.totalAmount = amount

        // 4. 返回选中的商品数
        return trueArr.length
      }
    }
}
</script>
<style scoped>
.row{
    border-bottom: 1px solid rgba(0,0,0,0.3);
    display: flex;
    padding: 10px;
    text-align: left;
}
.switch{
    flex:0 0 52px;
}
.img{
    margin-left: 5px;
    height: 75px;
    width: 75px;
    flex: 0 0 85px;
}

.inforight{
    margin-left: 5px;
    flex:1;
}
.inforight ul{
    padding-left: 0px;
    margin: 0;
}
.inforight li{
    list-style: none;
    display: inline-block;
    margin-right: 20px;
}
.red {
    color: red;
}
.inforight h4{
    color: #0094ff;
    font-size: 14px;
}
#total{
    height: 100px;
    background-color: rgba(0,0,0,0.1);
    display: flex;
    padding: 5px;;
    text-align: left;
}

#total ul {
    padding-left: 0px;
}
#total li{
    list-style: none;
    font-size: 14px;
}

#button{
    flex:0 0 60px;
    margin: 30px 0 0 0 ;
}

.desc{

    flex:1;
}
</style>